<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-input-group compact>
                <a-select default-value="Option1">
                  <a-select-option value="Option1"> 版权名称 </a-select-option>
                </a-select>
                <a-input style="width: 70%" placeholder="请输入" v-model="queryParam.name" />
              </a-input-group>
            </a-col>

            <a-col :md="4" :sm="24">
              <span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden' }">
                <a-button type="primary" @click="search" style="margin-right: 24px">搜索</a-button>
              </span>
            </a-col>
            <a-col :md="24" :sm="24">
              <div style="display: flex">
                <a-button type="primary" @click="showAddModal">新增版权</a-button>
              </div>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <s-table ref="table" size="default" :rowKey="record => record.id" :columns="columns" :data="loadData" :pagination="pagination" :bordered="false" style="margin-top: 24px">
        <span slot="expireDate" slot-scope="text, record">
          {{ record.expireType == '1' ? '永久有效' : record.expireDate }}
        </span>
        <span slot="isCreatePoster" slot-scope="text, record">
          {{ record.isCreatePoster == 'Y' ? '是' : '否' }}
        </span>
        <span slot="createProductPoster" slot-scope="text, record">
          {{ record.createProductPoster == 'Y' ? '是' : '否' }}
        </span>
        <span slot="serial" slot-scope="text, record, index">
          {{ (pagination.current - 1) * pagination.pageSize + index + 1 }}
        </span>
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm ok-text="Yes" title="确定移除吗？" cancel-text="No" @confirm="handleRemove(record)">
            <a>移除</a>
          </a-popconfirm>
        </span>
      </s-table>
    </a-card>
    <!-- 新增版权 -->
    <a-modal width="30vw" :visible="visible" @ok="handleEditOk" @cancel="visible = false">
      <a-form-model ref="ruleForm" :model="addForm" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item ref="name" label="版权名称" prop="name">
          <a-input
            placeholder="请输入版权名称"
            v-model.trim="addForm.name"
            @blur="
              () => {
                $refs.name.onFieldBlur()
              }
            "
          />
        </a-form-model-item>
        <a-form-model-item label="有效期限" prop="expireType">
          <a-radio-group name="radioGroup" v-model="addForm.expireType">
            <a-radio :value="1"> 永久 </a-radio>
            <a-radio :value="2"> 指定时间 </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item prop="expireDate" v-if="addForm.expireType == 2" style="margin-left: 150px">
          <a-date-picker format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" v-model="addForm.expireDate" />
        </a-form-model-item>
        <a-form-model-item label="是否生成海报" prop="isCreatePoster">
          <a-radio-group name="radioGroup" v-model="addForm.isCreatePoster">
            <a-radio :value="'Y'"> 是 </a-radio>
            <a-radio :value="'N'"> 否 </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="是否生成单品海报" prop="createProductPoster" v-if="addForm.isCreatePoster == 'N'">
          <a-radio-group name="radioGroup" v-model="addForm.createProductPoster">
            <a-radio :value="'Y'"> 是 </a-radio>
            <a-radio :value="'N'"> 否 </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="备注" prop="remark">
          <a-textarea v-model="addForm.remark" placeholder="请输入" :auto-size="{ minRows: 3, maxRows: 5 }" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { STable } from '@/views/box/components'
import { copyrightList, editCopyright, deleteCopyright } from '@/api/pos/authority'
const columns = [
  {
    title: '版权名称',
    dataIndex: 'name',
    width: 200,
    align: 'center',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '到期时间',
    dataIndex: 'expireDate',
    align: 'center',
    scopedSlots: { customRender: 'expireDate' }
  },
  {
    title: '是否生成海报',
    dataIndex: 'isCreatePoster',
    align: 'center',
    scopedSlots: { customRender: 'isCreatePoster' }
  },
  {
    title: '是否生成单品海报',
    dataIndex: 'createProductPoster',
    align: 'center',
    scopedSlots: { customRender: 'createProductPoster' }
  },
  {
    title: '备注',
    dataIndex: 'remark',
    align: 'center',
    width: 500,
    scopedSlots: { customRender: 'remark' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '120px',
    align: 'center',
    fixed: 'right',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    STable
  },
  data() {
    return {
      visible: false,
      columns,
      queryParam: {},
      addForm: {},
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      loadData: parameter => this.fetchData(parameter),
      pagination: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
      },
      rules: {
        name: [
          { required: true, message: '请输入版权名称', trigger: 'blur' },
          { min: 1, max: 20, message: '版权名称限制20字内', trigger: 'blur' }
        ],
        expireType: [{ required: true, message: '请选择有效期限', trigger: 'change' }],
        isCreatePoster: [{ required: true, message: '请选择是否生成海报', trigger: 'change' }],
        createProductPoster: [{ required: true, message: '请选择是否生成单品海报', trigger: 'change' }],
        remark: [{ min: 0, max: 200, message: '备注限制200字内', trigger: 'blur' }]
      }
    }
  },
  methods: {
    search() {
      this.$refs.table.refresh()
    },
    showAddModal() {
      this.visible = true
      this.addForm = {}
    },
    handleEdit(record) {
      this.visible = true
      this.addForm = record
    },
    handleEditOk() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.editAuthority()
        } else {
          return false
        }
      })
    },
    async handleRemove(record) {
      const param = {
        id: record.id
      }
      const res = await deleteCopyright(param)
      if (res.code == 200) {
        this.$refs.table.refresh()
      } else {
        this.$message.error(res.msg || res.message)
      }
    },
    // 新增|编辑版权信息
    async editAuthority() {
      let param = {
        name: this.addForm.name,
        expireType: this.addForm.expireType,
        isCreatePoster: this.addForm.isCreatePoster,
        remark: this.addForm.remark,
      }
      if(this.addForm.id){
        Object.assign(param,{
          id: this.addForm.id
        })
      }
      if(this.addForm.isCreatePoster == 'N'){
        Object.assign(param,{
          createProductPoster: this.addForm.createProductPoster
        })
      }
      if(this.addForm.expireType == 2){
        Object.assign(param,{
          expireDate: this.addForm.expireDate,
        })
      }
      const res = await editCopyright(param)
      if (res.code == 200) {
        this.visible = false
      } else {
        this.$message.error(res.msg || res.message)
      }
      this.$refs.table.refresh()
    },
    fetchData(parameter) {
      const queryParam = JSON.parse(JSON.stringify(this.queryParam))
      const data = {}
      data.copyrightListQto = queryParam

      data.copyrightListQto.current = parameter.pageNo
      data.copyrightListQto.size = parameter.pageSize
      return copyrightList(data.copyrightListQto).then(res => {
        if (res.code === 200) {
          this.pagination.current = res.data.current
          const { total, size, current } = res.data
          const data = {
            page: {
              count: total,
              pageNo: current,
              pageSize: size,
              pages: Math.ceil(total / size)
            },
            data: res.data.records
          }
          return data
        } else {
          this.$message.error(res.msg || res.message)
          const data = {
            page: {
              pageNo: 0,
              count: 0,
              pageSize: 10
            },
            data: []
          }
          return data
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>